<template>
  <div class="demo3">
    <area-select v-model="area"></area-select>
    {{area}}
    <Button @click="changeArea">改变</Button>
    <Button @click="changeArea1">清空</Button>
    <hr/>
    <area-select v-model="area3" @change="change"></area-select>
    {{area3}}
    <Button @click="changeArea2">改变</Button>
    <Button @click="changeArea3">清空</Button>
  </div>


</template>


<script>
  import AreaSelect from './components/areaSelect/index'

  export default {
    name: 'demo3',
    components: {
      AreaSelect
    },
    props: {},
    data() {
      return {
        area: [
          {"code": "130000", "names": "河北省", "level": "0"},
          {
            "code": "130200",
            "names": "唐山市",
            "level": "1"
          }, {"code": "130203", "names": "路北区", "level": "2"}
        ],
        area3: []

      }

    },
    mounted() {
    },
    methods: {
      change: console.log,
      changeArea() {
        this.$set(this, 'area', [{"code": "110000", "names": "北京市", "level": "0"}, {
          "code": "110100",
          "names": "市辖区",
          "level": "1"
        }, {"code": "110107", "names": "石景山区", "level": "2"}])
      },
      changeArea1() {
        this.$set(this, 'area', [])
      },
      changeArea2() {
        this.$set(this, 'area3', [{"code": "110000", "names": "北京市", "level": "0"}, {
          "code": "110100",
          "names": "市辖区",
          "level": "1"
        }, {"code": "110107", "names": "石景山区", "level": "2"}])
      },
      changeArea3() {
        this.$set(this, 'area3', [])
      }
    },
    computed: {},

  };
</script>

<style scoped lang="scss">
  .demo3 {
  }
</style>
<style lang="scss">
  .demo3 {
  }
</style>
